<template>
  <div>
    <p>分数：{{ scoreList }}</p>
    <p>优秀：{{ betterList }}</p>
    <p>不及格：{{ failList }}</p>

    <p>{{ userName }}</p>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
const scoreList = ref([80, 100, 90, 70, 60])

// const userName = ref({
//   firstName: '张',
//   lastName: '三'
// })
const firstName = ref('张')
const lastName = ref('三')
// 计算属性的改变依赖其他属性
const betterList = computed(() => scoreList.value.filter(item => item >= 80))
const failList = computed(() => scoreList.value.filter(item => item < 60))

const userName = computed({
  get () {
    return firstName.value + lastName.value
  },
  set (newValue) {
    firstName.value = newValue.firstName
    lastName.value = newValue.lastName
  }
})

setTimeout(() => {
  scoreList.value.push(10, 20, 80)
  userName.value = {
    firstName: '李',
    lastName: '四'
  }
}, 1000)
</script>

<style scoped>

</style>